<template>
    <div class="back_contain_n mine-account">
        <div class="leftList">
            <li v-for="(item,index) in paramList" :key="index"
                :class="{'active': viewType == item.key}"
                @click="changeView(item)"
            >
                <el-badge :value="item.num" class="item">
                    <span>{{item.name}}</span>
                </el-badge>
            </li>
        </div>
        <div class="mainTable">
            <table-one v-if="viewType == '光伏录入'"></table-one>
            <table-two v-if="viewType == '光伏统计'"></table-two>
        </div>
    </div>
</template>

<script>
import tableOne from './table-one/index.vue'
import tableTwo from './table-two/index.vue'
export default {
    data() {
        return {
            viewType: '光伏录入',
            paramList: [									
                { name: "光伏录入",key:'光伏录入',tableType:'1'},
                { name: "光伏统计",key:'光伏统计',tableType:'2'},
            ],
        };
    },
    methods: {
        changeView(val){
            this.viewType = val.key;
        },
    },
    components: {tableOne,tableTwo}
};
</script>

<style lang="scss" scoped>
.mine-account {
    .leftList {
        display: flex;
        margin-bottom: 15px;
        li {
            list-style: none;
            width: 100px;
            height: 30px;
            line-height: 28px;
            border-bottom: 1px solid #fff;
            color: #333;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
            transition: all .5s;
            position: relative;
            display: flex;
            justify-content: center;
            &.active {
                color: #ff9935;
                border-color: #ff9935;
                position: relative;
                font-weight: 600;
                font-size: 14px;
            }
        }
    }
}
</style>
